<template>
  <div class="wss-container">
    <!-- <div class="title-label">图片管理</div> -->

    <div class="box-container">
      <NewCard :isScroll="true" title="选择标签" class="left">
        <el-aside style="padding: 0rem" width="280px">
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item
              @click="activeLabel(item)"
              v-for="(item, index) in labelLIst"
              :index="index + ''"
              :key="item.id"
            >
              <!-- <i class="el-icon-document"></i> -->
              <span slot="title" style="padding: 0px" class="length-box"
                >{{ item.content }}
                <span class="lengthNum"> {{ item.Picture.length }}</span></span
              >
            </el-menu-item>
          </el-menu></el-aside
        >
      </NewCard>

      <NewCard
        :isScroll="true"
        :isright="true"
        title="所选标签图片"
        class="main"
      >
        <template v-slot:right>
          <el-button
            size="mini"
            @click="showDeleteDialog"
            v-hasPermi="['work:photo:remove']"
            >删除</el-button
          ></template
        >

        <template v-slot:default>
          <div>
            <div class="demo-image__placeholder">
              <template v-if="currentLabel.length != 0">
                <div
                  class="block"
                  @click="activeFn(v)"
                  v-for="v in currentLabel"
                  :key="v.id"
                  :class="{
                    isAll: v.isAll == true ? true : false,
                  }"
                >
                  <!-- cuurentImage.id == v.id || v.isAll ? true : false,  全选或者当前选中某一个id-->
                  <el-image
                    :preview-src-list="urlArr"
                    fit="contain"
                    style="border-radius: 4px"
                    :src="v.url"
                  ></el-image>
                  <div class="demonstration-box">
                    <span class="demonstration">{{ v.name }}</span>

                    <span class="demonstrationKb"
                      >{{ v.size | changeSize }} KB
                    </span>
                  </div>
                </div>
              </template>
              <template v-else> 暂无图片 </template>
            </div>
          </div>
        </template>
      </NewCard>

      <NewCard :isright="true" title="上传与编辑" class="footer">
        <!-- <span>共{{ PictureList.length }}张图片</span> -->
        <template v-slot:right>
          <div style="display: flex">
            <el-button
              size="mini"
              style="margin-right: 10px"
              type="primary"
              @click="confirem"
              >确认</el-button
            >
            <Upload
              class="Upload"
              ref="Upload"
              @on-getPictrue="getPhotoistFn"
              :labelId="labelId"
            ></Upload>
          </div>
        </template>
        <!-- <el-button @click="all" v-hasPermi="['work:photo:remove']"
            >全选</el-button
          > -->
        <template v-slot:default>
          <div class="position-box">
            <div class="button-box">
              <!-- <el-button
              type="primary"
              v-hasPermi="['work:photo:add']"
              @click="dialogVisible = true"
              >上传图片</el-button
            > -->
            </div>
          </div>
        </template>
      </NewCard>
    </div>
    <el-container>
      <!-- <el-header class="taber-title">图片管理</el-header> -->
      <el-container> </el-container>
    </el-container>

    <el-dialog
      title="系统提示"
      :visible="deleteDialogVisible"
      width="30%"
      @close="handleClose"
    >
      是否删除 {{ PictureNum }} 张图片？
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="deleteFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";

import Upload from "@/wss/views/ImageManagement/upload.vue";
// import Upload from "@/wss/views/ImageManagement/newUpload.vue";

import {
  getPhotoistApi,
  getPhotoRemoveApi,
} from "@/wss/newApi_3-24/imageAdmin.js";
import { getlabelListApi } from "@/wss/newApi_3-24/base/label.js";
export default {
  components: {
    Upload,
    NewCard,
  },
  data() {
    return {
      // 预览图片
      urlArr: [],
      // 是否第一次进入
      first: true,
      deleteDialogVisible: false,
      // 标签id
      labelId: "",
      // 上传对话框是否显示
      dialogVisible: false,
      // 标签管理
      labelLIst: [],
      // 所有图片
      PictureList: [],
      // 当前选择的图片
      cuurentImage: {},
      // 当前活跃标签
      currentLabel: [],
      // 要删除的图片数量
      PictureNum: 0,
      // 保存左侧当前点击的哪一项
      currentActive: {},
    };
  },
  async created() {
    await this.getPhotoistFn();
    // this.getlabelListFn();
  },
  filters: {
    changeSize(data) {
      return (Number(data) / 1024).toFixed(2);
    },
  },
  methods: {
    // 上传图片确认按钮
    confirem() {
      this.$refs.Upload.confirem();
    },
    showDeleteDialog() {
      this.deleteDialogVisible = true;
      let PictureNum = 0;
      this.currentLabel.forEach((item) => {
        if (item.isAll || this.cuurentImage.id == item.id) {
          PictureNum += 1;
        }
      });
      this.PictureNum = PictureNum;
    },
    cancel() {
      this.deleteDialogVisible = false;
    },
    // 全选
    all() {
      let { currentLabel } = this;
      currentLabel.forEach((item) => {
        item.isAll = true;
      });

      // console.log(currentLabel, "随便说");
      let temp = this.currentLabel;
      this.currentLabel = [];
      this.currentLabel = [];
      this.currentLabel = temp;
      // console.log(this.currentLabel);
    },
    // 当前点击的
    activeFn(item) {
      const _this = this;
      let { currentLabel } = _this;
      _this.currentLabel = [];
      currentLabel.forEach((v) => {
        v.isAll = false;
      });
      currentLabel.find((v) => {
        if (item.id == v.id) {
          v.isAll = !v.isAll;
        }
      });

      _this.currentLabel = currentLabel;
    },
    // 被点击标签
    activeLabel(item) {
      const _this = this;
      _this.currentActive = item;
      _this.currentLabel = item.Picture;

      _this.urlArr = Array.from(_this.currentLabel, (item) => {
        return item.url;
      });

      _this.labelId = item.id;
    },

    // 获取图片列表
    async getPhotoistFn(isUpload, labelId) {
      const _this = this;
      let { code, rows } = await getPhotoistApi({
        pageNum: 1,
        pageSize: 10000,
      });
      if (code != 200) return;

      _this.PictureList = JSON.parse(JSON.stringify(rows));

      let { labelLIst, PictureList } = _this;

      let { code: labelCode, rows: label } = await getlabelListApi();
      if (labelCode != 200) return;
      labelLIst = JSON.parse(JSON.stringify(label));
      // 合并图片到标签中
      labelLIst.forEach((item) => {
        _this.labelId = item.id;
        item.Picture = [];
        PictureList.forEach((v) => {
          // 后端是以字节存储的

          if (item.id == v.labelId) {
            item.Picture.push(v);
          }
        });
      });

      if (isUpload == "upload") {
        let currentAdditem = labelLIst.find((v) => {
          return v.id == labelId;
        });
        _this.activeLabel(currentAdditem);
      }
      // 第一次进入
      if (_this.first) {
        _this.currentLabel = labelLIst[0].Picture;
        console.log(labelLIst[0], "你终于学会了");
        _this.labelId = labelLIst[0].id;
        _this.first = false;
      }

      _this.labelLIst = labelLIst;

      // console.log(label, "这哥们");
    },
    async deleteFn() {
      let params = "";
      this.currentLabel.forEach((item) => {
        if (item.isAll) {
          params += item.id + ",";
        }
      });
      console.log(params);
      if (params == "") {
        this.$message({
          message: "未选中",
          type: "warning",
        });
        return;
      }
      let { code, msg } = await getPhotoRemoveApi(params);
      if (code != 200) return;
      // 重新刷新图片
      await this.getPhotoistFn();
      console.log(this.currentActive);
      let current = this.labelLIst.find(
        (item) => item.id == this.currentActive.id
      );
      this.activeLabel(current);

      this.$message({
        message: "操作成功",
        type: "success",
      });
      this.deleteDialogVisible = false;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
// 容器的高度
$height: 100%;
.box-container {
  display: flex;
  height: $height;
  align-items: flex-start;
  justify-content: space-around;
  ::v-deep .el-menu-item {
    height: 42px;
    line-height: 42px;
  }
}

.title-label {
  font-weight: 900;
  font-size: 2.8rem;
  margin-bottom: 2rem;
}
.taber-title {
  color: #e38ca8;
  height: 8rem !important;
  line-height: 8rem;
  background-color: #ffffff;
  margin-bottom: 2rem;
}
.left {
  margin-right: 30px;
  // border-radius: $border-radius;
  height: $height;
  // padding-right: 0px;
  width: 280px;
  ::v-deep .el-card__body {
    // padding-right: 0px;
    height: $height;
    .scroll {
      overflow-y: scroll;
      height: 100%;
      padding-top: 10px !important;
      margin-right: -25px;
    }
  }
  ::v-deep .el-menu-item:hover {
    background: unset;
  }
}
.main {
  margin-right: 30px;
  height: $height;

  // border-radius: $border-radius;

  flex: 1;

  background-color: #ffffff;
  margin-bottom: 2rem;

  ::v-deep .el-card__body {
    // padding-right: 0px;
    height: $height;

    .scroll {
      overflow-y: scroll;
      height: 100%;
      margin-right: -25px;
    }
  }
  .demo-image__placeholder {
    display: grid;
    // flex-wrap: wrap;
    // justify-content: space-evenly;
    // grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
    // grid-template-rows: 33.33% 33.33% 33.33%;
  }
}
.Upload {
  flex: 1;
  text-align: center;
  // margin: auto 0px;
}

.block {
  border-radius: 4px;
  font-size: 14px;
  color: #333333;
  margin-bottom: 2rem;
  height: 150px;
  display: flex;
  flex-direction: column;
  text-align: center;
  .demonstration-box {
    height: 50px;
    padding-bottom: 10px;
    .demonstration {
      margin: 10px 0px;
      display: block;
    }
    .demonstrationKb {
      font-size: 12px;
      color: #999999;
      margin-bottom: 1rem;
    }
  }
}
::v-deep .el-aside {
  overflow: unset;
}
.block :nth-child(5) {
  margin-right: 0rem;
}
.block:hover {
  border: 0.3rem #f28709 solid;
  padding: 0.1rem;
}

.footer {
  height: $height;
  position: relative;
  // border-radius: $border-radius;

  font-size: 14px;

  border-top: 1px solid #efefefef;

  bottom: 0rem;
  background-color: #ffffff;

  justify-content: center;
  width: 280px;
  // .position-box {
  //   position: relative;
  //   .button-box {
  //     position: absolute;

  //     z-index: 10;
  //   }
  //   footer {
  //     position: absolute;
  //     right: -70px;
  //     ::v-deep .avatar-uploader {
  //       width: 200px;
  //     }
  //     ::v-deep .el-upload-list {
  //       margin: 0;
  //       position: absolute;
  //       padding: 0;
  //       list-style: none;
  //       /* margin-right: 34px; */
  //       right: 60%;
  //     }
  //   }
  // }
}
::v-deep .el-upload-list--picture {
  position: absolute;
  margin-top: 10px;
  left: 18%;
}
.isAll {
  border: 0.3rem #f28709 solid;
  padding: 0.1rem;
}
.cuurentImage {
  border: 0.3rem #f28709 solid;
  padding: 0.1rem;
}
.el-row {
  margin-bottom: 0rem;
}
::v-deep .el-menu {
  border-right: unset;
}
.el-menu-vertical-demo {
  // position: fixed;

  height: $height;
  width: 280px;
}

.length-box {
  position: relative;
  // display: inline-block;
  display: flex;
  justify-content: space-between;
  padding: unset;
  width: 100%;
}
::v-deep .el-menu-item {
  padding: 0px;
  padding-left: 0px !important;
}
.lengthNum {
  position: absolute;
  right: 30px;
  color: #cccccc;
}
</style>